<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <!-- <script src="./lib/vue.js"></script> -->
  <script src="./lib/vue.min.js"></script>
  <link rel="stylesheet" href="./lib/vant@2.12.54_lib_index.css">
  <link rel="stylesheet" href="./styles/vant.css" />
  <script src="./lib/vant@2.12.54_lib_vant.min.js"></script>
  <script src="./lib/axios-0.18.0.js"></script>
  <script src="./http/request.js"></script>
  <script src="./areaList/areaList.js"></script>
  <title>代跑跑</title>
  <style>
    .main {
      overflow: scroll;
      margin-top: 16px;
      height: 85vh;
    }

    .van-tabbar-item__icon {
      font-size: 30px;
    }

    .van-cell {
      align-items: center;
    }

    .confirm-save-info-box {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 10vh;
    }

    .confirm-save-info-box .van-button--normal {
      font-size: 16px;
    }

    .confirm-save-info-box .van-button--block {
      width: 40%;
    }

    .van-button--danger {
      background-color: var(--van-primary);
      border: 1px solid var(--van-primary);
    }

    .van-address-item .van-radio__icon--checked .van-icon {
      background-color: var(--van-primary);
      border-color: var(--van-primary);
    }

    .van-tag--danger {
      background-color: var(--van-primary);
    }

    .van-switch--on {
      background-color: var(--van-primary);
    }

    .van-tag {
      text-indent: 1px;
    }

    .van-address-item__address {
      font-size: 16px;
      line-height: 32px;
    }

    .van-address-list__bottom {
      display: none;
    }

    .van-address-item:not(:last-child) {
      margin-bottom: 0;
    }

    .van-cascader__option--selected {
      color: var(--van-primary);
    }

    .QR {
      margin: 0 auto;
      width: 60vw;
    }

    .rabbitQR {
      margin: 0 auto;
      width: 85vw;
    }

    .rabbitQRRotate {
      transform: rotate(90deg) translateX(-120%) scale(2);
      transform-origin: left center;
    }

    .van-popup.QRContainer {
      overflow-y: visible;
    }

    .order-details.van-popup {
      background-color: var(--van-doc-background);
    }

    .orderDetails {
      margin-top: 5px;
    }

    .order-details .van-button::before {
      border-radius: 0% 25px;
    }

    .changePlus .van-cell__value {
      color: var(--van-primary);
    }

    .changeSub .van-cell__value {
      color: var(--van-danger);
    }

    .van-dialog__confirm,
    .van-dialog__confirm:active {
      color: var(--van-primary);
    }

    .van-coupon-list__list {
      height: calc(60vh - 48px) !important;
    }

    .van-coupon-list__bottom {
      padding: 0;
    }

    .van-coupon__condition {
      display: none;
    }

    .van-coupon__amount {
      color: var(--van-primary);
    }

    .van-coupon-list__bottom .van-button--danger {
      background-color: var(--van-primary);
      border: 1px solid var(--van-primary);
    }

    .van-checkbox.van-coupon__corner {
      display: none;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 标题栏 身份标识 -->
    <van-nav-bar v-if="!this.userType" title="我的"></van-nav-bar>
    <van-nav-bar v-else title="我的(已是帮手)"></van-nav-bar>
    <div class="main">
      <van-form @submit="saveInfo">
        <!-- 基础用户信息 -->
        <van-cell-group title="默认地址" inset>

          <!-- 联系方式 -->
          <van-field v-model="phone" left-icon="phone-o" label="联系方式" placeholder="请输入联系方式"
                     :rules="[{ validator, required: true, message: '请输入正确的国内电话号码' }]"></van-field>

          <!-- 当前默认地址 -->
          <van-field readonly clickable :value="address" left-icon="location-o" label="当前默认地址" placeholder="点击选择地址"
                     @click="isShowAddressList = true" :rules="[{  required: true, message: '请选择地址' }]"></van-field>

          <!-- 地址列表弹出层 -->
          <van-popup v-model="isShowAddressList" round position="bottom">
            <van-tabs v-model="areaList">
              <van-tab title="静园">
                <van-area title="静园" :area-list="JingYuanAreaList" @confirm="getAddress"
                          @cancel="isShowAddressList = false"></van-area>
              </van-tab>
              <van-tab title="怡园">
                <van-area title="怡园" :area-list="YiYuanAreaList" @confirm="getAddress"
                          @cancel="isShowAddressList = false"></van-area>
              </van-tab>
              <van-tab title="教学楼">
                <van-area title="教学楼" :area-list="TeachingBuildingAreaList" @confirm="getAddress"
                          @cancel="isShowAddressList = false"></van-area>
              </van-tab>
              <van-tab title="其他">
                <van-area title="其他" :area-list="OtherAreaList" @confirm="getAddress"
                          @cancel="isShowAddressList = false"></van-area>
              </van-tab>
            </van-tabs>
          </van-popup>

          <!-- 保存按钮 -->
          <div style="margin: 16px;">
            <van-button round block :loading="isLoading" type="primary" native-type="submit">保存信息</van-button>
          </div>

        </van-cell-group>

      </van-form>

      <!-- 默认地址列表 默认地址数量 > 0 显示-->
      <van-cell-group title="选择地址" inset v-if="this.defaultAddressList.length > 1">
        <van-field readonly clickable label="默认地址列表" left-icon="orders-o" right-icon="arrow" placeholder="点击选择默认地址"
                   @click="showDefaultAddressList"></van-field>
      </van-cell-group>

      <!-- 默认地址列表弹出层 -->
      <van-popup v-model="isShowDefaultAddressList" closeable position="bottom">
        <van-address-list v-model="chosenAddressId" @select="changeAddress" :list="defaultAddressList"
                          default-tag-text="默认" @edit="deleteAddress"></van-address-list>
      </van-popup>

      <!-- 更多服务单元组 -->
      <van-cell-group title="更多服务" inset>
        <van-grid clickable :column-num="2">
          <van-grid-item icon="balance-pay" :text="'余额：'+(money/100).toFixed(2) + '元'"
                         @click="isShowDetails = true"></van-grid-item>
          <van-grid-item icon="qr" :text="'极兔身份码'" @click="showRabbitQR"></van-grid-item>
        </van-grid>
        <van-grid clickable :column-num="2">
          <van-grid-item icon="gold-coin-o" text="申请提现" @click="applyWithdrawal"></van-grid-item>
          <van-grid-item icon="bookmark-o" text="优惠券" @click="isShowCouponList = true"></van-grid-item>
        </van-grid>
        <van-grid clickable :column-num="2">
          <van-grid-item icon="service-o" text="微信客服" @click="isShowWechatQR = true"></van-grid-item>
          <van-grid-item icon="friends-o" text="申请成为帮手" @click="isShowToBeHelperQR = true"></van-grid-item>
        </van-grid>
      </van-cell-group>

      <!-- 微信客服QR弹出层 -->
      <van-popup v-model="isShowWechatQR" class="QRContainer">
        <div class="QR">
          <van-image width="100%" height="100%" src="./img/WechatQR.png"></van-image>
        </div>
      </van-popup>

      <!-- 申请成为帮手QR弹出层 -->
      <van-popup v-model="isShowToBeHelperQR" class="QRContainer">
        <div class="QR">
          <van-image width="100%" height="100%" src="./img/HelperQR.png"></van-image>
        </div>
      </van-popup>

      <!-- 极兔身份码QR弹出层 -->
      <van-popup v-model="isShowRabbitQR" class="QRContainer rabbitQRRotate">
        <div class="rabbitQR">
          <van-image width="100%" height="100%" :src="rabbitQR"></van-image>
        </div>
      </van-popup>

      <!-- 余额明细弹出层 -->
      <van-popup v-model="isShowDetails" class="order-details" closeable round position="bottom"
                 :style="{ height: '80%' }">
        <van-cell-group title="余额明细" inset></van-cell-group>
        <van-cell-group class="orderDetails" inset v-for="item in transactionsList" :key="item.transactionID">
          <div class="popup-main">
            <van-cell title="订单号" readonly :value="item.number"></van-cell>
            <van-cell title="变动" class="changePlus" readonly v-if="item.changeMoney > 0"
                      :value="'+' + (item.changeMoney/100).toFixed(2)"></van-cell>
            <van-cell title="变动" class="changeSub" readonly v-else
                      :value="(item.changeMoney/100).toFixed(2)"></van-cell>
            <van-cell title="订单完成时间" readonly :value="item.transactionDate"></van-cell>
            <van-cell title="变动原因" readonly :value="item.transactionType"></van-cell>
          </div>
        </van-cell-group>
      </van-popup>

      <!-- 优惠券弹出层 -->
      <van-popup v-model="isShowCouponList" round position="bottom" style="height: 60vh; padding-top: 4px;">
        <van-coupon-list :coupons="coupons" :show-exchange-bar="false" :show-close-button="false"
                         :disabled-coupons="disCoupons">
        </van-coupon-list>
      </van-popup>
    </div>

    <!-- 底层标签页 -->
    <van-tabbar class="tabbar" v-model="active" @change="onChange">
      <van-tabbar-item icon="wap-home" name="home">主页</van-tabbar-item>
      <van-tabbar-item icon="shop" name="information">商家</van-tabbar-item>
      <van-tabbar-item icon="thumb-circle" name="distribute">下单</van-tabbar-item>
      <van-tabbar-item icon="bars" name="order">订单</van-tabbar-item>
      <van-tabbar-item icon="manager" name="personalCenter">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</body>
<script>
  new Vue({
    el: "#app",
    data() {
      return {
        phone: '', // 联系方式
        address: '', // 默认地址
        userType: 0, // 用户类型
        money: 0, // 余额
        ppCoins: 0, // 跑跑币
        chosenAddressId: 1, // 当前选择的默认地址id
        active: 'personalCenter', // 控制标签栏的显示
        isShowCouponList: false, // 是否展示优惠券列表
        isLoading: false, // 是否展示按钮加载样式
        isShowAddressList: false, // 是否显示地址列表弹出层
        isShowDefaultAddressList: false, // 是否显示默认地址列表弹出层
        isShowWechatQR: false, // 是否展示微信客服二维码
        isShowToBeHelperQR: false, // 是否展示申请成为帮手二维码
        isShowRabbitQR: false, // 是否展示极兔身份码
        isRabbitQRRotate: false, // 是否旋转极兔身份码
        isShowDetails: false, // 是否展示余额详情弹出层
        defaultAddressList: [], // 默认地址列表
        transactionsList: [], // 余额明细列表
        coupons: [], // 可用优惠券列表
        disCoupons: [], // 不可用优惠券列表
        areaList: '', // 一级地址
        rabbitQR: '', // 极兔身份码二维码
        // 地址列表
        JingYuanAreaList: JingYuanAreaList,
        YiYuanAreaList: YiYuanAreaList,
        TeachingBuildingAreaList: TeachingBuildingAreaList,
        OtherAreaList: OtherAreaList,
      }
    },
    methods: {
      // 联系方式表单校验
      validator(val) {
        // 国内手机号码宽松正则校验
        return /^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(val)
      },
      // 获取地址
      getAddress(values) {
        // 拼接要展示的地址
        this.address = values.filter((item) => !!item).map((item) => item.name).join('/')
        // 关闭地址列表弹出层
        this.isShowAddressList = false
      },
      // 显示默认地址列表
      showDefaultAddressList() {
        // 显示默认地址列表弹出层
        this.isShowDefaultAddressList = true
        setTimeout(() => {
          // 获取虚拟DOM
          const editIcons = document.querySelectorAll('.van-icon.van-icon-edit')
          // 修改图标样式
          editIcons.forEach(item => {
            item.classList.add('van-icon-delete')
            item.classList.remove('van-icon-edit')
          })
        }, 1)
      },
      // 保存默认地址
      saveInfo() {
        this.isLoading = true
        if (!this.defaultAddressList.length) {
          // 没有默认地址 执行新增默认地址逻辑
          axios({
            method: 'POST',
            url: '/user/user/insert',
            data: {
              phone: this.phone,
              address: this.address
            }
          }).then(res => {
            if (res.code === 1) {
              setTimeout(() => {
                // 操作成功提示
                this.$toast.success('保存成功')
                // 关闭按纽加载样式
                this.isLoading = false
              }, 500)
              // 刷新默认地址列表
              this.getDefaultAddressList()
            }
          })
        }
        // 有默认地址 执行修改默认地址逻辑
        axios({
          method: 'PUT',
          url: '/user/user/saveInfo',
          data: {
            id: this.chosenAddressId,
            phone: this.phone,
            address: this.address
          }
        }).then(res => {
          if (res.code === 1) {
            setTimeout(() => {
              // 操作成功提示
              this.$toast.success('保存成功')
              // 关闭按纽加载样式
              this.isLoading = false
            }, 500)
            // 刷新默认地址列表
            this.getDefaultAddressList()
          }
        })
      },
      // 切换默认地址
      changeAddress(item) {
        // 设置 当前选中的默认地址id 为 传入的地址id
        this.chosenAddressId = item.id
        // 设置 当前选中的默认地址信息 为 传入的地址信息
        this.phone = item.tel
        this.address = item.address
        axios({
          method: 'PUT',
          url: `/user/user/update/${item.id}`
        }).then(res => {
          if (res.code === 1) {
            // 刷新默认地址列表
            this.getDefaultAddressList()
            // 地址切换成功提示
            this.$toast.success('切换地址成功')
            // 关闭默认地址列表弹出层的显示
            this.isShowDefaultAddressList = false
          }
        })
      },
      // 删除默认地址
      deleteAddress(item) {
        axios({
          method: 'DELETE',
          url: `/user/user/delete/${item.id}`
        }).then(res => {
          if (res.code === 1) {
            // 刷新默认地址列表
            this.getDefaultAddressList()
            // 删除地址成功提示
            this.$toast.success('删除地址成功')
            // 关闭默认地址列表弹出层的显示
            this.isShowDefaultAddressList = false
          }
          if (res.code === 0) {
            // 删除地址失败提示
            this.$toast.fail('不能删除默认地址')
            // 关闭默认地址列表弹出层的显示
            this.isShowDefaultAddressList = false
          }
        })
      },
      // 申请提现
      async applyWithdrawal() {
        const res = await axios({ method: 'GET', url: '/user/order/withdraw' })
        if (res.code === 1) {
          // 申请提现成功提示
          this.$toast('申请提现成功，审核需要1~2个工作日')
        } else {
          // 申请提现失败提示
          this.$dialog.alert({
            message: res.msg,
          }).then(() => {
          })
        }
      },
      // 极兔身份码
      async showRabbitQR() {
        const res = await axios({ method: 'GET', url: '/user/home/rabbitQR' })
        if (res.code === 1) {
          this.rabbitQR = 'data:image/png;base64,' + res.data.rabbitQR
          this.isShowRabbitQR = true
        } else {
          this.$toast(res.msg)
        }
      },
      // 获取参数
      getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
        var r = window.location.search.substring(1).match(reg)
        if (r != null) {
          return decodeURIComponent(r[2])
        }
        return ''
      },
      // Tabbar 跳转其他页面
      onChange(index) {
        if (index === 'home') {
          location.href = './home.html?flag=0'
        } else {
          location.href = `./${index}.html`
        }
      },
      // 获取默认地址列表
      async getDefaultAddressList() {
        const res = await axios({ method: 'GET', url: '/user/user/getInfo' })
        const userInfo = res.data.addressList
        if (userInfo.length !== 0) {
          userInfo.forEach(item => item.name = '')
          this.defaultAddressList = userInfo
          const defaultInfo = userInfo.find(item => item.isDefault)
          this.chosenAddressId = defaultInfo.id
          this.phone = defaultInfo.tel
          this.address = defaultInfo.address
        }
        this.money = res.data.money
        this.ppCoins = res.data.paopaoCoins
        this.transactionsList = res.data.transactionsDTOList
        const response = await axios({ method: 'GET', url: '/user/user/getDA' })
        this.userType = response.data.userType
        this.coupons = []
        this.disCoupons = []
        response.data.coupons.forEach(item => {
          for (let count = 0; count < item.count; count++) {
            this.coupons.push(item)
          }
        })
        response.data.disCoupons.forEach(item => {
          for (let count = 0; count < item.count; count++) {
            this.disCoupons.push(item)
          }
        })
      }
    },
    mounted() {
      // 获取默认地址列表
      this.getDefaultAddressList()
      const phone = this.getQueryString('phone')
      const address = this.getQueryString('address')
      if (this.getQueryString('popup') !== '') {
        const popupStatus = +this.getQueryString('popup')
        if (popupStatus === 0) {
          this.$toast({
            duration: 3000,
            message: `${address}的用户${phone}抢走喽，祝您下次好运`
          })
        } else if (popupStatus === 1) {
          this.$toast('优惠券已加入卡包')
          this.isShowCouponList = true
        } else if (popupStatus === -1) {
          this.$toast('优惠券领取次数已达上限')
        } else if (popupStatus === -2) {
          this.$toast('抱歉，您没有下过订单，无法领取优惠券')
        }
      }
      if (this.getQueryString('flag') !== '') {
        const flag = +this.getQueryString('flag')
        if (flag === 1) {
          this.$toast({
            duration: 4000,
            message: '请填写电话号码和地址信息'
          })
        }
      }
    }
  })
</script>

</html>